<?php if(!class_exists("View", false)) exit("no direct access allowed");?><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鲲鹏应用中心</title>
    <!-- 修复资源引入路径，使用CDN确保资源可访问 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="/i/css/font-awesome.min.css" rel="stylesheet">
    <script src="/i/js/chart.umd.min.js"></script>
    <script src="/i/js/jquery.min.js"></script>
    <link href="/i/css/css2.css" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        dark: '#1D2129',
                        ocean: {
                            50: '#E6F4FF',
                            100: '#CCE8FF',
                            200: '#99D1FF',
                            300: '#66B9FF',
                            400: '#33A1FF',
                            500: '#0088FF',
                            600: '#0066CC',
                            700: '#004C99',
                            800: '#003366',
                            900: '#001A33'
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .app-card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-ocean-500 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 hover:bg-ocean-600 focus:ring-2 focus:ring-ocean-400 focus:outline-none;
            }
            .btn-secondary {
                @apply bg-white text-dark border border-gray-300 font-medium py-2 px-4 rounded-lg transition-all duration-300 hover:bg-gray-50 focus:ring-2 focus:ring-gray-300 focus:outline-none;
            }
            .input-field {
                @apply border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-ocean-400 focus:border-ocean-500 outline-none transition-all duration-300;
            }
            .captcha-image {
                @apply h-10 rounded-lg cursor-pointer border border-gray-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
    <!-- 登录页面 -->
    <div id="login-page" class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-ocean-50 to-ocean-100">
        <div class="w-full max-w-md">
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
                <!-- 登录表单 -->
                <div class="p-8">
                    <div class="text-center mb-8">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-ocean-100 mb-4">
                            <i class="fa fa-cubes text-ocean-500 text-3xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold text-dark">鲲鹏应用中心</h2>
                        <p class="text-gray-500 mt-2">一站式应用聚合平台</p>
                    </div>
                    
                    <!-- 登录方式切换 -->
                    <div class="flex mb-6">
                        
                        <button id="phone-login-tab" class="flex-1 py-2 text-center font-medium text-gray-500 border-b-2 border-transparent">
                            手机号登录
                        </button>
                    </div>
                    
                    
                    
                    <!-- 手机号登录表单 -->
                    <div id="phone-login-form">
                        <div class="mb-4">
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-phone text-gray-400"></i>
                                </div>
                                <input type="tel" id="phone" class="input-field pl-10 w-full" style="padding-left: 26px;" placeholder="请输入手机号">
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="graphic-code" class="block text-sm font-medium text-gray-700 mb-1">图形验证码</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-picture-o text-gray-400"></i>
                                </div>
                                <input type="text" id="graphic-code" class="input-field pl-10 w-full pr-32" style="padding-left: 26px;" placeholder="请输入图形验证码">
                                <img id="captcha-image" src="https://picsum.photos/120/40?random=1" alt="图形验证码" class="captcha-image absolute inset-y-0 right-0 mr-1">
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label for="code" class="block text-sm font-medium text-gray-700 mb-1">短信验证码</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-shield text-gray-400"></i>
                                </div>
                                <input type="text" id="code" class="input-field pl-10 w-full pr-32" style="padding-left: 26px;" placeholder="请输入短信验证码">
                                <button type="button" id="get-code-btn" class="absolute inset-y-0 right-0 mr-1 bg-ocean-100 text-ocean-500 px-3 rounded-lg hover:bg-ocean-200 transition-colors" disabled>
                                    获取验证码
                                </button>
                            </div>
                        </div>
                        
                        <button type="button" id="phone-login-action" class="btn-primary w-full py-3 mb-4" disabled>登录</button>
                    </div>
                    
                    <!-- 注册提示 -->
                    <div class="text-center text-sm text-gray-500">
                        <p>没有账号？请联系管理员添加</p>
                        <p class="text-ocean-500 mt-1">管理员邮箱：admin@blueocean.com</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主内容区 (初始隐藏) -->
    <main id="main-content" class="container mx-auto px-4 pt-24 pb-16 hidden">
        <!-- 欢迎区域 -->
        <section class="mb-10">
            <div class="bg-gradient-to-r from-ocean-100 to-blue-100 rounded-2xl p-6 md:p-8">
                <div class="flex flex-col md:flex-row items-center justify-between">
                    <div class="mb-6 md:mb-0">
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">欢迎回来，张三！</h2>
                        <p class="text-gray-600 mb-4 max-w-2xl">今天是 <span id="current-date" class="font-medium"></span>，你有 3 个待办事项和 5 个通知需要查看。</p>
                        <div class="flex flex-wrap gap-3">
                            <button class="bg-ocean-500 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 hover:bg-ocean-600 focus:ring-2 focus:ring-ocean-400 focus:outline-none">
                                <i class="fa fa-plus mr-2"></i>添加应用
                            </button>
                            <button class="btn-secondary">
                                <i class="fa fa-cog mr-2"></i>个性化设置
                            </button>
                        </div>
                    </div>
                    <div class="w-full md:w-auto">
                        <img src="https://picsum.photos/id/180/600/300" alt="应用统计图表" class="rounded-lg shadow-md max-w-full h-auto">
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 (初始隐藏) -->
    <footer id="footer" class="bg-white border-t border-gray-200 hidden">
        <div class="container mx-auto px-4 py-8">
            <div class="text-center text-sm text-gray-500">
                © 2025 鲲鹏应用中心. 保留所有权利
            </div>
        </div>
    </footer>
    <script src="/i/js/util.js"></script>
    <script src="/i/js/login.js"></script>
</body>
</html>